<!DOCTYPE html PUBLIC "-//W3C//DTD XHTML 1.0 Transitional//EN" "http://www.w3.org/TR/xhtml1/DTD/xhtml1-transitional.dtd">
<html xmlns="http://www.w3.org/1999/xhtml">
    <head>
        <title>Sliderman.js - Examples - Created by Devtrix.net</title>
        <meta http-equiv="content-type" content="text/html; charset=utf-8" />
        <meta http-equiv="imagetoolbar" content="no" />
        <meta name="keywords" content="slideman, sliderman.js, javascript slider, jquery, slideshow, effects" />
        <meta name="description" content="Sliderman.js - will do all the sliding for you :)" />
        <style type="text/css">
            * { margin: 0; outline: none; }            
            .c { clear: both; }
            #wrapper { margin: 0 auto;}
            h2 { padding: 20px 0 10px 0; font-size: 24px; line-height: 40px; font-weight: normal; color: #adc276; text-shadow: 0 1px 3px #222222; }
        </style>

        <!-- sliderman.js -->
        <script type="text/javascript" src="js/sliderman.1.3.7.js"></script>
        <link rel="stylesheet" type="text/css" href="css/sliderman.css" />
    </head>	
    <body>
        <div id="wrapper">
            <div id="examples_outer">
                <div id="slider_container_2">
                    <div id="SliderName_2" class="SliderName_2">
                        <img src="images/img_1.jpg" width="500" height="500" alt="Demo2 first" title="Demo2 first" usemap="#img1map" />
                        <map name="img1map">
                            <area href="#img1map-area1" shape="rect" coords="100,100,200,200" />
                            <area href="#img1map-area2" shape="rect" coords="300,100,400,200" />
                        </map>                        
                        <div class="SliderName_2Description">Featured model: <strong>Charlize Theron</strong></div>
                        <img src="images/img_2.jpg" width="500" height="500" alt="Demo2 third" title="Demo2 third" />
                        <div class="SliderName_2Description">Featured model: <strong>Charlize Theron</strong></div>
                        <img src="images/img_3.jpg" width="500" height="500" alt="Demo2 fourth" title="Demo2 fourth" />
                        <div class="SliderName_2Description">Featured model: <strong>Charlize Theron</strong></div>
                    </div>
                    <div class="c"></div>
                    <div id="SliderNameNavigation_2"></div>
                    <div class="c"></div>

                    <script type="text/javascript">
                        effectsDemo2 = 'move, move2';
                        var demoSlider_2 = Sliderman.slider({container: 'SliderName_2', width: 700, height: 450, effects: effectsDemo2,
                            display: {
                                autoplay: 3000,
                                loading: {background: '#000000', opacity: 0.5, image: 'imgages/loading.gif'},
                                buttons: {hide: true, opacity: 1, prev: {className: 'SliderNamePrev_2', label: ''}, next: {className: 'SliderNameNext_2', label: ''}},
                                description: {hide: true, background: '#000000', opacity: 0.4, height: 50, position: 'bottom', container: 'SliderNameNavigation_2', label: '<img src="images/clear.gif"/>'}
                            }
                        });
                    </script>

                    <div class="c"></div>
                </div>
                <div class="c"></div>
            </div>

            <div class="c"></div>
        </div>
    </body>
</html>